<script setup>

import { ref,onMounted } from "vue";
// props 与 emits
const props = defineProps({
  productParam: {
    type: Object,
    required: true
  },
  isEdit: {
    type: Boolean,
    default: false
  }
});
//所有专题列表1
const subjectList = ref( [])
//专题左右标题1
const subjectTitles = ref( ['待选择', '已选择'])
//所有专题列表2
const prefrenceAreaList = ref( [])
//专题左右标题2
const prefrenceAreaTitles = ref( ['待选择', '已选择'])
const emits = defineEmits(['prevStep', 'nextStep']);


const filterMethod = (query, item) => {
  return item.label.indexOf(query) > -1;
}

onMounted(() => {

})

const handlePrev = () => {
  emits('prevStep')
}

const handleFinishCommit = () => {
  emits('saveProduct',props.isEdit)
}
</script>

<template>
  <div style="margin-top: 50px">
    <el-form :model="props.productParam"
             ref="productRelationForm"
             label-width="120px"
             class="form-inner-container"
             size="small">
      <el-form-item label="关联专题：">
        <el-transfer
            style="display: inline-block"
            filterable
            :filter-method="filterMethod"
            filter-placeholder="请输入专题名称"
            v-model="selectSubject"
            :titles="subjectTitles"
            :data="subjectList">
        </el-transfer>
      </el-form-item>
      <el-form-item label="关联优选：">
        <el-transfer
            style="display: inline-block"
            filterable
            :filter-method="filterMethod"
            filter-placeholder="请输入优选名称"
            v-model="selectPrefrenceArea"
            :titles="prefrenceAreaTitles"
            :data="prefrenceAreaList">
        </el-transfer>
      </el-form-item>
      <el-form-item style="text-align: center">
        <el-button @click="handlePrev">上一步，填写商品属性</el-button>
        <el-button type="primary" @click="handleFinishCommit">完成，提交商品</el-button>
      </el-form-item>
    </el-form>
    </div>

</template>

<style scoped>

</style>